<template>
  <div class="content-box">
    <div v-if="race_match_notice.list&&race_match_notice.list.length">
      <el-table
        :data="race_match_notice.list"
        v-bind="getTableProps()"
        class="scopeCon">
        <el-table-column
          width="400">
          <template slot-scope="scope">
            <div>
              <span class="top-mark">{{scope.row.top===1?'[置顶]':''}}</span>&nbsp;<el-button @click="checkEdit(scope.$index, scope.row)" type="link" class="content-title">{{scope.row.title | trim}}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="250">
          <template slot-scope="scope">
            <p  class="content-message">
              <span>{{scope.row.nickName}}</span>
              <span>发布于{{scope.row.createTime | FormatDate('yyyy-MM-dd')}}</span>
            </p>
          </template>
        </el-table-column>
          <el-table-column
            width="170">
            <template slot-scope="scope">
            <el-button @click="handleDelete(scope.$index, scope.row)" type="link">删除</el-button>
            <el-button @click="handleEdit(scope.$index, scope.row)" type="link">编辑</el-button>
            <el-button @click="handleTop($event,scope.$index, scope.row)" type="link">{{ scope.row.top===1?'取消置顶':'置顶' }}</el-button>
          </template> 
        </el-table-column> 
      </el-table>
      <!--分页-->
      <el-pagination
        v-bind="getPaginationProps(race_match_notice)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        >
      </el-pagination>
    </div>
    <e-placeholder v-else text="先发布赛事公告吧"></e-placeholder>
    <div class="button-box" v-if="!loading">
      <router-link :to="{path: '/race/detail/notice/publish', query: {id: this.$route.query.id, matchId: this.$route.query.id, tasktype: this.$route.query.tasktype, isRun: this.$route.query.isRun}}">
        <el-button type="primary">发布公告</el-button>
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { pagingList } from 'utils/mixins'
  import api from 'api/race'
  export default {
    props: {
      history: { // 列表分页是否产生历史记录
        type: Boolean,
        default: false
      }
    },
    mixins: [pagingList],
    computed: {
      ...mapGetters({
        loading: 'loading',
        race_match_notice: 'race_match_notice'
      })
    },
    mounted () {
      this.$store.dispatch('race_match_notice', this.query)
    },
    data () {
      return {
        query: this.getQuery()
      }
    },
    methods: {
      checkEdit (index, row) {
        this.$router.push({
          name: 'NoticeItem',
          params: {
            id: row.id
          },
          query: {
            id: this.$route.query.id,
            matchId: this.$route.query.matchId,
            tasktype: this.$route.query.tasktype,
            isRun: this.$route.query.isRun
          }
        })
      },
      handleEdit (index, row) {
        this.$router.push({
          name: 'NoticeEdit',
          params: {
            id: row.id
          },
          query: {
            id: this.$route.query.id,
            matchId: this.$route.query.matchId,
            tasktype: this.$route.query.tasktype,
            isRun: this.$route.query.isRun
          }
        })
      },
      handleDelete (index, row) {
        this.$confirm('此操作将永久删除该赛事公告, 是否继续?', '温馨提示', {
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          api.delMatchNotice({
            matchInfoId: row.id
          }, {context: this, successMsg: 'none'}).then(res => {
            this.$store.dispatch('race_match_notice', this.query) // 删除成功重新获取赛事公告
          })
        })
      },
      handleTop (e, index, row) {
        api.topMatchNotice({
          matchInfoId: row.id,
          top: row.top === 1 ? '0' : '1'
        }, {context: e.target}).then(res => {
          this.$store.dispatch('race_match_notice', this.query) // 置顶或者不置顶成功重新获取赛事公告
        })
      },
      fetch (query) { // 分页，和搜索表单发生提交时触发事件
        this.$store.dispatch('race_match_notice', query)
      }
    }
  }
</script>

<style>
.scopeCon .el-table__header{
  margin-top: -80px
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.top-mark {
  background: #fc6f00;
  color: #fff;
  padding: 0;
}

.content-title {
  width: 320px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
}

.content-message {
  font-size: 12px;
  line-height: 12px;
  color: #666;
  :nth-of-type(1) {
    max-width: 80px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: -1px;
  }
}

.button-box {
  margin: 30px auto;
}

</style>
